<template>
  <div class="guide-wrapper">
    <!-- 顶部横幅 -->
    <header class="hero fade-in">
      <h1 class="hero-title">智慧门禁使用指南</h1>
    </header>

    <!-- 主体栅格 -->
    <main class="grid-panel">
      <section
        v-for="(m, i) in modules"
        :key="i"
        class="module-card fade-in"
        :style="{ '--accent': m.color, '--delay': i * 0.15 + 's' }"
      >
        <div class="card-index">0{{ i + 1 }}</div>
        <div class="card-icon">
          <component :is="m.icon" />
        </div>
        <h3 class="card-title">{{ m.title }}</h3>
        <p class="card-desc">{{ m.desc }}</p>
        <ul class="card-tips">
          <li v-for="t in m.tips" :key="t">{{ t }}</li>
        </ul>
      </section>
    </main>

    <!-- 底部小贴士 -->
    <footer class="footer fade-in" style="--delay: 0.9s">
      如仍有问题，请联系
      <strong>学院信息中心</strong>（内线 8888）
    </footer>
  </div>
</template>

<script setup lang="ts">
/* 图标：直接用 UTF-8 表情，无需引入图标库 */
const modules = [
  {
    title: '刷卡开门',
    desc: '将校园卡放置于读卡区，听到“滴”即可通行。',
    color: '#3b82f6',
    icon: () => '💳',
    tips: ['读卡距离≤3 cm', '停留 1 s 即可', '闪红→请重刷'],
  },
  {
    title: '二维码开门',
    desc: '打开“学院 App”→“门禁码”，对准扫描窗。',
    color: '#10b981',
    icon: () => '📱',
    tips: ['每次刷新 60 s', '可提前截屏', '离线也可生成'],
  },
  {
    title: '人脸识别',
    desc: '站在黄色识别区，正脸看向摄像头。',
    color: '#8b5cf6',
    icon: () => '👤',
    tips: ['识别距离 0.5-1.2 m', '戴帽/口罩需摘下', '夜间补光自动开启'],
  },
  {
    title: '访客通道',
    desc: '点击“临时通行”→填写事由→生成 6 位码。',
    color: '#f59e0b',
    icon: () => '🚪',
    tips: ['当日 23:59 失效', '最多 5 人同行', '可发送给微信好友'],
  },
  {
    title: '故障处理',
    desc: '读卡失败 / 门常开 / 无电 等常见情况。',
    color: '#ef4444',
    icon: () => '⚠️',
    tips: ['读卡失败→擦拭卡片', '门常开→手动合上', '无电→使用应急 USB-C'],
  },
  {
    title: '安全须知',
    desc: '防尾随、防代刷、应急逃生等重要提醒。',
    color: '#6366f1',
    icon: () => '🛡️',
    tips: ['一人一刷，禁止代刷', '注意身后陌生人', '火警时门常开'],
  },
]
</script>

<style scoped>
/* 全局变量 */
:root {
  --gap: 32px;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* 整体布局 */
.guide-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  padding: 40px;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  opacity: 0;
  animation: pageFadeIn 0.5s ease forwards 0.2s;
}

/* 页面整体浮现动画 */
@keyframes pageFadeIn {
  to {
    opacity: 1;
  }
}

/* 元素浮现动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 浮现动画类 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* 顶部英雄区 */
.hero {
  text-align: center;
  margin-bottom: 48px;
  --delay: 0.1s;
}
.hero-title {
  font-size: 48px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 1px;
}
.hero-title span {
  display: block;
  font-size: 32px;
  font-weight: 400;
  color: var(--accent, #3b82f6);
  margin-top: 8px;
}
.hero-sub {
  font-size: 16px;
  color: #64748b;
  margin-top: 12px;
}

/* 栅格面板 */
.grid-panel {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* 模块卡片 - 保留悬停放大效果 */
.module-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease; /* 保持过渡效果 */
  transform-origin: center top; /* 优化缩放原点 */
}
.module-card:hover {
  transform: translateY(-6px) scale(1.02); /* 保留并增强悬停放大效果 */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); /* 悬停时增强阴影 */
}
.card-index {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.08;
  user-select: none;
}
.card-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 20px;
  transition: transform 0.3s ease; /* 图标单独过渡 */
}
.module-card:hover .card-icon {
  transform: scale(1.1); /* 图标放大效果更明显 */
}
.card-title {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}
.card-desc {
  font-size: 15px;
  color: #475569;
  margin-bottom: 16px;
  flex: 1;
}
.card-tips {
  list-style: none;
  font-size: 14px;
  color: #64748b;
  padding-left: 0;
}
.card-tips li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}
.card-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* 底部 */
.footer {
  text-align: center;
  margin-top: 48px;
  font-size: 14px;
  color: #64748b;
}
.footer strong {
  color: #3b82f6;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .grid-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .guide-wrapper {
    padding: 20px;
  }
  .hero-title {
    font-size: 36px;
  }
  .hero-title span {
    font-size: 24px;
  }
  .grid-panel {
    grid-template-columns: 1fr;
  }
}
</style>
